{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">本系统实例的管理页</h2>
        <div class="table-responsive">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <select class="form-control bg-primary" name="ins_type" id="ins_type" ins_type="{{ ins_type }}">
                        <option>ALL</option>
                        <option>ORACLE</option>
                        <option>MYSQL</option>
                        <option>MONGO</option>
                        <option>POSTGRESQL</option>
                        <option>REDIS</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" name="ins_status" id="ins_status" ins_status="{{ ins_status }}">
                        <option>VALID</option>
                        <option>LOCKED</option>
                        <option>ALL</option>
                    </select>
                </div>
                {% include 'basic_app/search.html' %}
                <button type="button" class="btn btn-primary" onclick="add()"><span
                        class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加实例
                </button>
                <button type="button" class="btn btn-primary" onclick="active_check()"><span
                        class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 一键探活
                </button>
            </form>
        </div>
        <div class="table-responsive">
            <table id="sqlaudit-list" data-toggle="table" class="table table-striped table-hover table-bordered"
                   style="table-layout: inherit; white-space: nowrap; text-overflow: ellipsis; margin-top: 0px;">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>类型</th>
                    <th>版本</th>
                    <th>数据库用途</th>
                    <th>ip</th>
                    <th>sid</th>
                    <th>service_name</th>
                    <th>port</th>
                    <th>连接串</th>
                    <th>状态</th>
                    <th>探活</th>
                    <th>探活时间</th>
                    <th>创建时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td style="display:none">{{ i.id }}</td>#}
                        <td>{{ i.id }}</td>
                        <td>{{ i.db_type }}</td>
                        <td>{{ i.db_version }}</td>
                        <td>{{ i.dbname }}</td>
                        <td>{{ i.ip }}</td>
                        <td>{{ i.sid }}</td>
                        <td>{{ i.service_name }}</td>
                        <td>{{ i.port }}</td>
                        <td>{{ i.conn_string }}</td>
                        <td>{{ i.status }}</td>
                        <td><span data-toggle="tooltip" data-placement="bottom"
                                  title="{{ i.ins_active_msg }}">{{ i.ins_active }}</span></td>
                        <td>{{ i.ins_active_time }}</td>
                        <td>{{ i.crtime | date:'Y-m-d H:i:s' }}</td>
                        <td>{{ i.remark }}</td>
                        <td><a style="cursor:pointer" onclick="edit({{ i.id }})">编辑</a> |
                            <a style="cursor:pointer" onclick="active_check({{ i.id }})">探活</a> |
                            <div class="btn-group">
                                <button type="button" class="btn btn-link  dropdown-toggle btn-sm"
                                        data-toggle="dropdown">
                                    更多
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    {#                                        <li><a href="/basic_app/instance_lock?nid={{ i.id }}"><span style="color: royalblue">锁定</span></a></li>#}
                                    <li><a onclick="ins_lock({{ i.id }})"><span style="color: royalblue">锁定</span></a>
                                    </li>

                                    <li type=""><a href="/basic_app/instance_delete?nid={{ i.id }}"
                                                   onclick="if(confirm('确认删除吗？')==false)return false;"><span
                                            style="color: royalblue">删除</span></a></li>
                                    <li><a href="/basic_app/instance_more?nid={{ i.id }}"><span
                                            style="color: royalblue">详情</span></a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {#        以下是分页#}
        {% include 'basic_app/paginator_ins.html' %}
        {#        以上是分页#}
    </div>
    </div>

    <!-- 模态框（Modal） 添加 / 编辑-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width:600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加、编辑实例信息
                    <small style="font-size: 70%; color: #5a6268;">（提交时自动实例探活）</small>
                    </h4>
                </div>
                <span>&nbsp</span>
                <form class="form-horizontal" style="padding-left: 10%" id="editForm">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">db_info：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_dbname" style="width:300px;" class="form-control"
                                   name="add_dbname"
                                   placeholder="生产库_liwk_127.0.0.1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ip：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_ip" style="width:300px;" class="form-control" name="add_ip"
                                   placeholder="127.0.0.1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">port：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_port" style="width:300px;" class="form-control"
                                   name="add_port"
                                   placeholder="1521">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">sid：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_sid"
                                   placeholder="liwk">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">service_name：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_service_name"
                                   placeholder="liwk">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">conn_string：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_conn_string"
                                   placeholder="127.0.0.1:1521/liwk">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">user/pwd：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_user_pwd"
                                   placeholder="liwk/liwk">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">sysdba：</label>
                        <div class="col-sm-10" style="width:300px;">
                            <select class="form-control" name="add_sysdba_role">
                                <option>否</option>
                                <option>是</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">remark：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_remark"
                                   placeholder="备注">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">type：</label>
                        <div class="col-sm-10" style="width:300px;">
                            <select class="form-control" name="add_type">
                                <option>ORACLE</option>
                                <option>MYSQL</option>
                                <option>MONGO</option>
                                <option>POSTGRESQL</option>
                                <option>REDIS</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">status：</label>
                        <div class="col-sm-10" style="width:300px;">
                            <select class="form-control" name="add_status">
                                <option>VALID</option>
                                <option>LOCKED</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" data-loading-text="Loading..." class="btn btn-primary"
                                id="instance_submit" onclick="button_submit()">提交
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}

{% block script %}
    <script>
        // 数据库类型，数据库状态变更公用方法
        function db_type_status_change() {
            ins_type = $('#ins_type').val();
            ins_status = $('#ins_status').val();
            user_search = $('#user_search').val();
            line_cont = $('#line_set').val();
            page = $('#page_set').val();
            path = '/basic_app/instance?ins_type=' + ins_type + '&ins_status=' + ins_status + '&page=' + page + '&line_count=' + line_cont + '&user_search=' + user_search
            window.location.href = path
        }

        {#$('#ins_status').change(function () {#}
        {#    ins_type = $('#ins_type').val();#}
        {#    add_ins_status = $('#ins_status').val();#}
        {#    user_search = $('#user_search').val();#}
        {#    line_cont = $('#line_set').val();#}
        {#    page = $('#page_set').val();#}
        {#    console.log(add_ins_status);#}
        {#    path = '/basic_app/instance?ins_status=' + add_ins_status + '&page=' + page + '&line_count=' + line_cont + '&user_search=' + user_search#}
        {#    window.location.href = path})#}


        $('#ins_status').change(function () {
            db_type_status_change();
        })
        $('#ins_type').change(function () {
            db_type_status_change();
        })

        //提交按钮事件
        function button_submit() {
            //判断input的值的合法性
            var ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            var port = /^[0-9]{1,5}$/;
            var onsubmit_dbname = document.getElementById("onsubmit_dbname");
            var onsubmit_ip = document.getElementById("onsubmit_ip");
            var onsubmit_port = document.getElementById("onsubmit_port");
            if (onsubmit_dbname.value == '' || onsubmit_dbname.value == null) {
                alert("请输入数据库名");
                return false;
            }
            if (onsubmit_ip.value == '' || onsubmit_ip.value == null) {
                alert("请输入ip地址");
                return false;
            }
            if (onsubmit_port.value == '' || onsubmit_port.value == null) {
                alert("请输入port号");
                return false;
            }
            if (!ip.test(onsubmit_ip.value)) {
                alert("请输入正确的ip地址");
                return false;
            }
            if (!port.test(onsubmit_port.value)) {
                alert("请输入正确的端口号");
                return false;
            }
            $.ajax({
                type: "POST",
                data: {
                    'add_id': $("input[name='add_id']").val(),
                    'add_dbname': $("input[name='add_dbname']").val(),
                    'add_ip': $("input[name='add_ip']").val(),
                    'add_port': $("input[name='add_port']").val(),
                    'add_sid': $("input[name='add_sid']").val(),
                    'add_conn_string': $("input[name='add_conn_string']").val(),
                    'add_user_pwd': $("input[name='add_user_pwd']").val(),
                    'add_sysdba_role': $("select[name='add_sysdba_role']").val(),
                    'add_remark': $("input[name='add_remark']").val(),
                    'add_status': $("select[name='add_status']").val(),
                    'add_type': $("select[name='add_type']").val(),
                    'add_service_name': $("input[name='add_service_name']").val(),
                    'line_count_set': $('.line_count').val(),
                    'page_set': $('#page_set').val(),
                    'search': $('.aa_search').val()
                },
                url: "/basic_app/instance_add_edit", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#instance_submit').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#instance_submit').button('reset')
                },
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        var url = result
                        window.location.href = url
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }


        //当添加表单时
        function add() {
            //首先清空表单数据
            $("#editForm")[0].reset();
            //调用模态框
            $('#myModal').modal('show')
        }

        //当编辑表单时回传数据
        function edit(id) {
            var url = "/basic_app/instance_add_edit?nid=" + id;
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("input[name='add_id']").val(res.id);
                    $("input[name='add_dbname']").val(res.dbname);
                    $("input[name='add_ip']").val(res.ip);
                    $("input[name='add_port']").val(res.port);
                    $("input[name='add_sid']").val(res.sid);
                    $("input[name='add_conn_string']").val(res.conn_string);
                    $("input[name='add_user_pwd']").val(res.u_info);
                    $("select[name='add_sysdba_role']").val(res.dba_role);
                    $("input[name='add_remark']").val(res.remark);
                    $("select[name='add_status']").val(res.status);
                    $("select[name='add_type']").val(res.db_type);
                    $("input[name='add_service_name']").val(res.service_name);
                }
            })
            //调用模态框
            $('#myModal').modal('show')
        }


        $(document).ready(function () {
            $('#tabbody tr').each(function (i) {
                $(this).children('td').each(function (j) {
                    if (j == 10) {
                        {#console.log($(this).text())#}
                        if ($(this).text() == 'FAILED') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'SUCCESS') {
                            $(this).css('color', 'green')
                        }
                    }
                    if (j == 9) {
                        //console.log($(this).text())
                        if ($(this).text() == 'LOCKED') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'VALID') {
                            $(this).css('color', 'green')
                        }
                    }
                });
            })
        })


        //一键探活
        function active_check(id) {
            $.ajax({
                type: "GET",
                data: {
                    'nid': id,
                    'line_count_set': $('.line_count').val(),
                    'page_set': $('#page_set').val(),
                    'search': $('.aa_search').val()
                },
                url: "/basic_app/instance_ins_check", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#instance_submit').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#instance_submit').button('reset')
                },
                success: function (result) {
                    res = JSON.parse(result);
                    if (res['ins_check_type'] == 'all') {

                        var iconType = "success";
                        var title = "巡检完成";
                        var result = result.message;
                        let iscancelButton = false;
                        // 调用公共方法弹窗
                        showAlert(title, result, iconType, iscancelButton);
                        alert('本次探活结果:' + '\n' +
                            'total:' + res['total_c'] + ' 个' + '\n' +
                            'success:' + res['success_c'] + ' 个' + '\n' +
                            'failed:' + res['failed_c'] + ' 个'
                        )
                        window.location.href = res['url']
                    } else {
                        window.location.href = res['url']
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

        //锁定实例
        function ins_lock(id) {
            $.ajax({
                type: "POST",
                data: {
                    'nid': id
                },
                url: "/basic_app/instance_lock", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    if (result == 'SUCCESS') {
                        location.reload()
                    } else {
                        alert(result)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })
        }

    </script>
{% endblock %}